<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid网格布局,二维的布局模式</title>
    <!-- 区别：弹性布局flex只能在单一方向（水平或垂直）上排列元素，适合线性排列的场景 -->
    <!-- 网格布局grid是二维布局，可以同时控制行和列的排列，实现整真正的二维布局，还可以实现真正的响应式设计 -->

    <!-- 练习grid布局的网站：https://cssgridgarden.com/ -->

    <style>
        * {
            box-sizing: border-box;
            margin: 0%;
            padding: 0%;
        }

        html,body {
            height: 300%;
            width: 100%;
        }

        /* 容器的设置：display：grid；（块级）或者display：inline-grid；（行内） */
        /* 与弹性盒子不同的是，在定义网格后，网页不会马上发生变化，因为display：grid；的声明只创建了一个只有一列的网格 */
        /* 网格轨道是核心，它决定了网格容器的基础布局结构，为元素提供了放置的位置 */
        /* grid-template-colunms 定义网格中的列   grid-template-rows 定义网格中的行 */
        #gridBox {
            width: 610px;
            height: 610px;
            border: 1px pink solid;
            margin: 20px auto;

            /* grid不需要换行，子盒子会拉伸到和的单元格长宽度相同 */
            display: grid;
            /* 创建列轨道，有几个属性值代表创建几列 */
            grid-template-columns: 200px 200px 200px;
            /* 创建行轨道，有几个属性值代表创建几行 */
            grid-template-rows: 200px 200px 200px;
            justify-content: space-between;
            align-content: space-between;
        } 

        .DanYuanGe {
            background-color: gray;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 方法一：不要设置行轨道，给小盒子高度 */
        .content {
            width: 820px;
            margin: 10px auto;
            border: 1px black solid;
            display: grid;
            /* px是绝对单位 */
            grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
            justify-content: space-between;
        }

        .content div {
            height: 100px;
            background-color: blueviolet;
            margin-bottom: 5px;
        }

        #FrBox-learning {
            width: 300px;
            height: 300px;
            border: 1px black solid;
            margin: 10px auto;
            display: grid;
            /* 剩余空间的占比 */
            /* grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 1fr 1fr 1fr; */

            /* repeat的语法：repeat(次数，轨道尺寸)或repeat(自动填充，轨道尺寸) */
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: 1fr 2fr 1fr;
            /* repeat的自动填充适用于响应式布局中的“列数随容器宽度变化”的场景
            auto-fill：尽可能多地创建列
            auto-fit：尽可能拉伸列填满容器（会合并空白，列宽不小于minmax的最小值） */
            /* minmax语法： minmax（最小值，最大值） */

            /* 行与列间距 */
            /* row-gap: 5px;
            column-gap: 5px; */
            /* gap: 5px; */
            gap: 5px 15px;
        }

        .frBox {
            background-color: blue;
        }

        #again {
            width: 80%;
            height: 300px;
            border: 1px pink solid;
            margin: 10px auto;
            gap: 5px;
            display: grid;
            /* repeat的自动填充适用于响应式布局中的“列数随容器宽度变化”的场景
            auto-fill：尽可能多地创建列
            auto-fit：尽可能拉伸列填满容器（会合并空白，列宽不小于minmax的最小值） */
            /* minmax语法： minmax（最小值，最大值） */
            grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
            /* 子盒子比较多时，auto-fill和auto-fit区别不明显，fit是占满父容器，fill不会占满，会留白 */
        }

        .heihei {
            height: 120px;
            background-color: bisque;
        }

        .heihei:first-child {
            /* 网格线（该属性需要写在子元素身上）会在grid使用网格布局时被创建，使用场景：实现元素跨越多个网格单元 */
            /* 列线，行线，左到右，上到下，n列或者n行就有n+1的线 */
            /* 实现语法1：跨列：grid-column（grid-row）：开始线/结束线 */
            /* grid-column: 1/3;
            grid-row: 1/3; */
            /* 实现语法2：grid-column（grid-row）：开始编号/span跨单元格数量 */
            grid-column: 1/ span 2;
            grid-row: 1/ span 2;
            height: auto;
        }

        /* 网格填充方式（grid-auto-flow），决定网格中子元素的排列填充方式 */
        /* grid-auto-flow： row；（默认：先行后列，即优先填满一行后换行）；grid-auto-flow：column（先列后行，优先填满一列之后换列） */
        #boiling-water {
            width: 80%;
            border: 1px black solid;
            margin: 80px auto;
            gap: 5px;
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
        }

        .feifei {
            height: 100px;
            background-color: aqua;
            /* 实现指定单元操作示例 */
            /* grid-column-start: 1;
            grid-column-end: 3; */
        }

        .box {
            height: 900px;
            overflow: hidden;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 1fr 1fr;
            /* 修改网格填充方式 */
            grid-auto-flow: column;
            gap: 20px;
            max-width: 1760px;
            min-width: 1000px;
            margin: 100px auto;
            border-radius: 20px;
        }

        .box img {
            /* review：解决图片插入的空白缝隙 */
            display: block;
            /* 尺寸问题也是客观存在的 */
            width: 100%;
            height: 100%;
            /* object-fit是用于控制替换元素（图片、视频等外部加载资源）如何适应其容器尺寸的属性 */
            /* fill是默认值，会拉伸变形 */
            /* object-fit: contain;contain是保持内容固有宽高比，缩放至完全适应容器内部（内容全部可见），容器内可能有空白类似“适应式” */
            /* cover是保持内容原有宽高比，缩放至覆盖容器（内容可能会被裁剪），容器无空白，类似“填充式” */
            object-fit: cover;
            object-position: center;
        }   

        .box .item {
            background-color: pink;
        }

        .box .item:first-child {
            grid-row: 1 / 3;
        }

        .box .item:nth-child(3) {
            /* 更全面，更安全的固定位置 */
            grid-column: 2 / 4;
            grid-row: 2 / 3;
        }

        .box001 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            /* 项目（子元素）对齐方式 */
            /* 水平方向 */
            justify-items: center;
            /* 垂直方向 */
            align-items: center;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 20px;
        }

        .box001 .items {
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>

</head>
<body>



    <!-- grid容器 -->
    <div id="gridBox">
        <!-- grid单元格 -->
        <div class="DanYuanGe">1</div>
        <div class="DanYuanGe">2</div>
        <div class="DanYuanGe">3</div>
        <div class="DanYuanGe">4</div>
        <div class="DanYuanGe">5</div>
        <div class="DanYuanGe">6</div>
        <div class="DanYuanGe">7</div>
        <div class="DanYuanGe">8</div>
        <div class="DanYuanGe">9</div>
    </div>

    <!-- 淘宝官网，行数不限，只确定列 -->
    <div class="content">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div id="FrBox-learning">
        <div class="frBox">1</div>
        <div class="frBox">2</div>
        <div class="frBox">3</div>
        <div class="frBox">4</div>
        <div class="frBox">5</div>
        <div class="frBox">6</div>
        <div class="frBox">7</div>
        <div class="frBox">8</div>
        <div class="frBox">9</div>
    </div>

    <!-- 响应式 -->
    <div id="again">
        <div class="heihei">1</div>
        <div class="heihei">2</div>
        <div class="heihei">3</div>
        <div class="heihei">4</div>
        <div class="heihei">5</div>
        <div class="heihei">6</div>
        <div class="heihei">7</div>
        <div class="heihei">8</div>
        <div class="heihei">9</div>
    </div>

    <div id="boiling-water">
        <div class="feifei">1</div>
        <div class="feifei">2</div>
        <div class="feifei">3</div>
        <div class="feifei">4</div>
        <div class="feifei">5</div>
        <div class="feifei">6</div>
        <div class="feifei">7</div>
        <div class="feifei">8</div>
        <div class="feifei">9</div>
    </div>

    <!-- 图片响应式 -->
    <div class="box">
        <div class="item">
          <img src="#" alt="图片一">
        </div>
        <div class="item">
          <img src="#" alt="图片二">
        </div>
        <div class="item">
          <img src="#" alt="图片三">
        </div>
        <div class="item">
          <img src="#" alt="图片四">
        </div>
    </div>

    <!-- 项目对齐方式，控制元素在网格内的对齐方式（注意，给父级元素添加） -->
    <!-- 水平对齐方式：justify-items；垂直对齐方式：align-items；水平加垂直对齐方式：place-items -->
    <div class="box001">
        <div class="items">1</div>
        <div class="items">2</div>
        <div class="items">3</div>
        <div class="items">4</div>
        <div class="items">5</div>
        <div class="items">6</div>
        <div class="items">7</div>
        <div class="items">8</div>
        <div class="items">9</div>
    </div>
</html>